<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        width: 100px;
        height: 20px;
        margin: 100px auto;
    }
    ul li{
        width: 20px;
        height: 20px;
        float: left;
        list-style: none;
        background-image: url(./img/star.png);
        background-position: -7px 27px;
    }
    /* .bian{
        background-position: -7px 47px;
    } */
    .one:hover{
        background-position: -7px 47px;
    }
    .two:hover{
        background-position: -7px 47px;
    }
    .three:hover{
        background-position: -7px 47px;
    }
    .four:hover{
        background-position: -7px 47px;
    }
    .five:hover{
        background-position: -7px 47px;
    }
    /* .one{
        
    } */
    .box{
        width: 300px;
        height: 180px;
        line-height: 180px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background:greenyellow;
        font-size: 30px;
        text-align: center;
        border-radius: 5px;
        display: none;

    }
    #queDing{
        position: absolute;
        top: 140px;
        left: 100px;
    }
    #quXiao{
        position: absolute;
        top: 140px;
        left: 170px;
    }
</style>
<body>
    <div class="box">
        <span class="yeMian">您给出了<span class="howMany"></span>星好评</span>
        <button id="queDing">确定</button><button id="quXiao">取消</button>
    </div>
    <ul class="ul">
        <li class="one" title="1"></li>
        <li class="two" title="2"></li>
        <li class="three" title="3"></li>
        <li class="four" title="4"></li>
        <li class="five" title="5"></li>
    </ul>
    <div class="www"></div>
    <script>
        var uls = document.querySelector('.ul');
        var lists = document.querySelectorAll('li');
        var box = document.querySelector('.box');
        var www = document.querySelector('.www');
        var yeMian = document.querySelector('.yeMian');
        var howMany = document.querySelector('.howMany');
        var queDing = document.querySelector('#queDing');
        var quXiao = document.querySelector('#quXiao');
        var arr;
        window.onload = function(){
            if(localStorage.arr){
                arr = JSON.parse(localStorage.arr);
            } else{
                arr = [];
            }
        }
        
        for(var i = 0;i < lists.length;i++){
            lists[i].onclick = function(){
                box.style.display = 'block';
                howMany.innerHTML = `${this.title}`;
                

            }
            

        }
        queDing.onclick = function(){
          www.innerHTML = yeMian.innerHTML;
          box.style.display = 'none';
        }
        quXiao.onclick = function(){
            box.style.display = 'none';
        }
    </script>
</body>
</html>